<template>
  <div class="crux_box" v-loading="signalsRadio1.loading" element-loading-text="加载中...">
    <!-- <div class="crux" v-if="signalsRadio1.title.title != undefined &&
    signalsRadio1.routerPush != 'details' &&
    signalsRadio1.title.title != ''
    ">
      <div class="byword">
        关键词
        <span class="hinge" v-if="signalsRadio1.title.title != ''">{{
    signalsRadio1.title.title
  }}</span>
      </div>
      <div class="subscribe" @click="subscription">一键订阅</div>
    </div> -->
    <!-- <Totalarticles v-if="signalsRadio1.routerPush == 'search' &&
    signalsRadio1.title.title != undefined &&
    signalsRadio1.title.title != ''
    " /> -->
    <!-- <div class="totalar" v-if="signalsRadio1.routerPush == 'details'">
      <div v-if="signalsRadio1.routerdetails == '1'">为您找到<span class="activeClor">{{ signalsRadio1.biaoxuntotals
          }}</span>条标讯
      </div>
    </div> -->
    <div style="min-height: 200px" v-if="signalsRadio1.total > 0">
      <div class="crux_cent" v-for="item in signalsRadio1.dataLiss" :key="item.cityid">
        <div class="crux_top">
          <span class="caption" v-if="item.infoid != '0'">{{
            informations(item.infoid)
          }}</span>
          <span class="caption" v-if="item.infoid == '0'">公告</span>
          <span v-html="item.title" class="neglect" @click="nameClick(item.nid, item.infoid)"></span>
          <span v-if="item.tags[0] != ''" class="glx" v-for="i in item.tags">
            {{ i }}</span>
          <el-popover placement="right" :width="200" trigger="hover">
            <template #reference>
              <span class="zizhi" v-if="item.certs.length > 0">资质</span>
            </template>
            <div style="padding: 10px 0 0 15px">
              <div style="font-size: 24px; margin-bottom: 15px">资质要求</div>
              <el-timeline>
                <el-timeline-item v-for="(activity, index) in item.certs" :key="index">
                  {{ activity }}
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-popover>
          <span v-if="item.have_file == '1'" class="glxs"> 有附件</span>

          <!-- <el-popover v-if="activities2.length > 0" placement="right" :width="400" trigger="hover">
            <template #reference>
              <span class="xiaobiao">
                <img style="margin-right: 6px; width: 14px; height: 14px" src="@/assets/img/lc.png" alt="" />
              </span>
            </template>
            <div style="padding: 10px;">
              <el-timeline>
                <el-timeline-item v-for="(activity, index) in activities2" :key="index">
                  <div style="display: flex; justify-content: space-between;">
                    <div style="width: 230px;">
                      <div>{{ activity.content }}</div>
                      <div>{{ activity.timestamp }}</div>
                    </div>
                    <div style="margin-left: 10px;!important">{{ activity.title }}</div>
                  </div>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-popover> -->
          <span class="logo1" v-if="item.bjTime > 0 && item.bjTime > dayspas">
            <img style="margin-right: 6px; width: 14px; height: 14px" src="@/assets/img/ls.png" alt="" />
            投标剩余 {{ toubiaoTime(item.bjTime) }} 天
          </span>
          <span class="logo2" v-if="item.wjTime > 0 && item.wjTime > dayspas">
            <img style="margin-right: 6px; width: 12px; height: 14px" src="@/assets/img/shu.png" alt="" />
            获取标书剩余 {{ toubiaoTime(item.wjTime) }} 天
          </span>
        </div>
        <div class="guanjian">
          <div class="guanjian_one" v-if="item.products?.length > 0" v-for="i in item.products.slice(0, 3)"
            :key="i.totalPrice" :class="{ red: signalsRadio1.title.title == i.names[0] }">
            {{ i.names[0] }}
          </div>
          <span v-if="item.products?.length > 3" class="more" @click="moreGd(item.products)">更多</span>
          <div></div>
        </div>
        <div class="crux_bth">
          <div class="crux_bth_one">
            <div class="crux_bth_zb">
              <span class="active">招标公司</span>
              <span v-if="item.xmdw != ''" v-html="item.xmdw"></span>
              <span v-if="item.xmdw == ''">{{ "-" }}</span>
            </div>
            <div class="crux_bth_zhb" v-if="item.infoid == '11'">
              <span class="active">中标公司</span>
              <span v-if="item.zbdw != null || item.zbdw != '' || item.zbdw != undefined
              " v-html="shujuleix(item.zbdw)">
                </span>
              <!-- <span v-if="item.zbdw != null || item.zbdw != '' || item.zbdw != undefined"> {{ item.zbdw}}</span> -->
            </div>
          </div>
          <div class="crux_bth_two">
            <div class="money" v-if="item.jg != ''">
              <img style="width: 14px; margin-right: 5px" src="@/assets/img/money.png" alt="" />
              <span style="text-align: left">
                {{ item.jg != "" ? money(item.jg) : "-" }}</span>
            </div>
            <div class="money" v-if="item.jg == ''">
              <img style="width: 14px; margin-right: 5px" src="@/assets/img/money.png" alt="" />
              <span style="text-align: left"> 见详情 </span>
            </div>
            <div class="address">
              <img style="width: 14px; margin-right: 5px" src="@/assets/img/dz.png" alt="" />
              <span style="text-align: left">{{ diqu(item.provinceid) }}</span>
            </div>
            <div class="timing">
              <img style="width: 14px; margin-right: 5px" src="@/assets/img/sj.png" alt="" />
              <span style="text-align: left">{{
                timestamp(item.dl_posttime)
              }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="signalsRadio1.dataLiss.length == 0" style="background-color: white; margin: 15px 0;">
      <el-empty description="暂无数据" />
    </div>
    <Pagination />
    <!-- <Paginations v-if="signalsRadio1.routerPush == 'details' && bx_center!== 1" /> -->
    <!-- <Vips v-if="bx_center== 1" /> -->
  </div>

  <el-dialog v-model="dialogVisible" title="产品列表" width="30%" :before-close="handleClose">
    <div class="infordisplay">
      <span :class="{
        red: signalsRadio1.title.title == items.names[0],
        cate_labels: true,
      }" v-for="items in boxes">{{ items.names[0] }}</span>
    </div>
  </el-dialog>
</template>

<script setup>
import Pagination from "@/components/pagination/index.vue";
// import Paginations from "@/components/daochuPages/index.vue";
// import Totalarticles from "../totalarticles/index.vue";
import { userInfo } from '@/Api/api.js'
import { onMounted, ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { timestamp, diqu, money } from "@/utils/index";
import { getCaricatureApi, search_read } from "@/Api/shoop/index.js";
import { useRadio1Store } from "@/pain/search/search";
// import { useCounterStore } from "@/pain/login/login";
import { ElMessage } from "element-plus";
// import Vips from "@/components/vipts/index.vue";
const signalsRadio1 = useRadio1Store();
// const useRouters = useCounterStore();
let inforLiss = ref([]);
const dialogVisible = ref(false);
import CryptoJS from "crypto-js";
const key = CryptoJS.enc.Utf8.parse("ysh425ptjhcpo781"); //十六位十六进制数作为密钥偏移量
const iv = CryptoJS.enc.Utf8.parse("53c5a64c6be84e97"); //十六位十六进制数作为密钥偏移量
const token = localStorage.getItem("token");
//解密
function decrypt(text) {
  var result = CryptoJS.AES.decrypt(text, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7,
  });
  return result.toString(CryptoJS.enc.Utf8);
}
const bx_center = ref(0)
const ids = ref()
if (token) {
  userInfo().then(rex => {
    ids.value = rex.data.data.level_id
    search_read().then((res) => {
      if (res.data.data.bx_center.indexOf(ids.value) == '-1') {
        bx_center.value = 1
      } else {
        bx_center.value = 0
      }
    });
  })
} else {
  ids.value = 0
}



const getInformation = () => {
  getCaricatureApi().then((res) => {
    let {
      data: { data },
    } = res;
    inforLiss.value = data;
    // console.log("中百欧", inforLiss);
  });
};
getInformation();
const informations = (id) => {
  let infor = inforLiss.value?.filter((res) => res?.infoid == id);
  return infor?.[0]?.infoname;
};
// 获标 投标
let dayspas = ref("");
const toubiaoTime = (bjTime) => {
  const bjTimes = new Date(); // 当前时间
  dayspas.value = Math.floor(bjTimes.getTime() / 1000);
  if (bjTime > 0 && bjTime > dayspas.value) {
    let daysPassed = Math.ceil((bjTime - dayspas.value) / 86400);
    return daysPassed;
  }
};

const handleClose = (done) => {
  done();
};
let boxes = ref([]);
const moreGd = (gd) => {
  dialogVisible.value = true;
  boxes.value = gd;
};
const Searchs = () => {
  if (signalsRadio1.routerPush == "search") {
    signalsRadio1.getsearchs();
  }

  if (signalsRadio1.routerPush == "details") {
    let daochu = JSON.parse(localStorage.getItem("daochu"));
    const ditu = JSON.parse(localStorage.getItem("ditu"));
    let list = {
      ...daochu,
      ...ditu,
    };
    signalsRadio1.T_getsearchs(list);
  }
};
// Searchs();
onMounted(() => {
  console.log('dataLiss', signalsRadio1.dataLiss)
});

const router = useRouter();
const nameClick = (nid, infoid) => {
  // if (!localStorage.getItem("token")) {
  //   return (useRouters.uselogin = true);
  // }
  if (signalsRadio1.routerPush == "search") {
    // const href = router.resolve({
    //   path: ,
    // });
    window.open(`/searchInfo?id=${nid}`, "_blank");
  }
};

const subscription = () => {
  signalsRadio1.subscriptions();
  if (signalsRadio1.msg != "") {
    ElMessage({
      message: signalsRadio1.msg,
      type: "success",
    });
  }
};

const shujuleix = (data) => {
  if (Array.isArray(data)) {
    return data[0];
  } else {
    return data;
  }
};

// 子站
const biaoxunshuju = () => {
  if (
    router.currentRoute.value.query.tags != "" &&
    signalsRadio1.routerPush == "search"
  ) {
    signalsRadio1.getsearchs();
  }
};
console.log(router.currentRoute);
// biaoxunshuju();
</script>

<style lang="scss" scoped>
.totalar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 20px;
  background-color: #fff;

  .totalar_right {
    display: flex;
  }

  .daochu1 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 30px;
    margin-left: 15px;
    font-size: 14px;
    border: 1px solid #6675FF;
    border-radius: 4px;
    color: #6675FF;
  }
}

.red {
  color: #ff4848;
}

.crux_box {
  background-color: #fff;
  min-height: 300px;
  // border-top: 1px solid #eeeeee;
}

.active {
  color: #a9b1be;
  margin-right: 10px;
}

.xiaobiao {
  display: inline-block;
  margin-left: 10px;
}

.crux {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 20px;
  border-bottom: 1px solid #eeeeee;

  .byword {
    font-size: 16px;
    font-weight: 500;

    .hinge {
      margin: 0 10px;
      padding: 2px 12px;
      font-size: 12px;
      font-family: Source Han Sans CN;
      background: #fde8bf;
      color: #f78c16;
      border-radius: 4px;
    }
  }

  .subscribe {
    width: 90px;
    height: 30px;
    background-color: #fe8d03;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
    color: #ffffff;
  }
}

.crux_cent {
  // height: 122px;
  padding: 20px 20px 20px 0;
  border-bottom: 1px solid #eeeeee;
  cursor: pointer;

  // &:hover {
  //   background-color: #eeeeee;
  // }

  .crux_top {
    display: flex;
    align-items: center;

    .caption {
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      padding: 0 12px;
      margin-right: 10px;
      background-color: #f43107;
      border-radius: 4px;
      color: #ffffff;
    }

    .neglect {
      max-width: 480px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .glx {
      height: 20px;
      line-height: 20px;
      padding: 0 12px;
      margin-left: 10px;
      background-color: #f5f5f5;
      font-size: 12px;
      border-radius: 5px;
      color: #3b3e5d;
    }

    .glxs {
      height: 20px;
      line-height: 20px;
      padding: 0 12px;
      margin-left: 10px;
      background-color: #f43107;
      font-size: 12px;
      border-radius: 5px;
      color: #fff;
    }

    .zizhi {
      height: 20px;
      line-height: 20px;
      padding: 0 12px;
      margin-left: 10px;
      background-color: #ffe8bf;
      font-size: 12px;
      border-radius: 5px;
      color: #fe8d03;
    }

    .logo1 {
      display: flex;
      align-items: center;
      width: 125px;
      height: 20px;
      background: url("@/assets/img/biaoxun.png") no-repeat;
      background-size: 125px 20px;
      font-weight: 600;
      margin-left: 10px;
      padding-left: 15px;
      font-size: 12px;
      color: #eeeeee;
    }

    .logo2 {
      display: flex;
      align-items: center;
      width: 134px;
      height: 20px;
      background: url("@/assets/img/biaoxu2.png") no-repeat;
      background-size: 134px 20px;
      font-weight: 600;
      margin-left: 10px;
      padding-left: 15px;
      font-size: 12px;
      color: #eeeeee;
    }
  }

  .guanjian {
    display: flex;
    align-items: center;
    // justify-content: space-between;
    margin: 10px 0;
    // height: 20px;
    .guanjian_one {
      height: 20px;
      margin-right: 10px;
      line-height: 20px;
      font-size: 12px;
      // background-color: #e6e9ff;
      background: #fde8bf;
      // color: #f43107;
      padding: 0 10px;
      border-radius: 3px;
    }
  }

  .crux_bth {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;

    .crux_bth_one {
      display: flex;
      font-size: 14px;

      .crux_bth_zb {
        width: 300px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .crux_bth_zhb {
        margin-left: 80px;
        width: 300px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .crux_bth_two {
      display: flex;
      font-size: 14px;

      .money {
        display: flex;
        align-items: center;
        width: 110px;
        margin-right: 50px;
        color: #fe8d03;
      }

      .address {
        display: flex;
        align-items: center;
        width: 74px;
        margin-right: 50px;
      }

      .timing {
        display: flex;
        align-items: center;
        width: 104px;
      }
    }
  }
}

.more {
  font-size: 12px;
  color: #f43107;
}

.infordisplay {
  height: 480px;
  overflow-x: hidden;
  overflow-y: scroll;
  display: flex;
  flex-wrap: wrap;
  // max-height: 400px;
  align-items: flex-start;
  overflow: auto;
  padding: 16px 24px;

  .cate_labels {
    margin-right: 10px;
    margin-bottom: 8px;
    padding: 2px 5px;
    border-radius: 5px;
    font-size: 14px;
    background: #fce2e0;
    color: #f43107;
  }


}
</style>
